<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 父组件不再需要处理事件，只需要渲染父组件即可 -->
      <!-- <BookItem
        v-for="(book, index) in books"
        :key="book.id"
        :book="book"
        :index="index"
        @increment="increment"
        @decrement="decrement"
        @remove="remove"
      /> -->
      <BookItem
        v-for="(book, index) in books"
        :key="book.id"
        :book="book"
        :index="index"
      />
    </tbody>
  </table>
</template>

<script lang="ts" setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from "vue";
import BookItem from './BookItem.vue';
import type { Book } from '@/types'; // 使用 import type 导入类型
 defineProps<{
  books: Book[];
}>();
// const props = defineProps({
//   books: {
//     type: Book[],
//     required: true,
//   },
// });

// const emit = defineEmits(['increment', 'decrement', 'remove']);

// const increment = (index: number) => {
//   emit('increment', index);
// };

// const decrement = (index: number) => {
//   emit('decrement', index);
// };

// const remove = (index: number) => {
//   emit('remove', index);
// };

/* 组件的生命周期 */
onBeforeMount(() => {
  console.log('父组件的onBeforeMount --- 父组件挂载前')
})
onMounted(()=> {
  console.log('父组件的onMounted --- 父组件挂载')
})
onBeforeUnmount(() => {
  console.log('父组件onBeforeUnmount  --- 父组件卸载前')
})
onUnmounted(() => {
  console.log('父组件的onUnmounted  --- 父组件卸载')
})
onBeforeUpdate(() => {
  console.log('父组件的onBeforeUpdate --- 父组件数据更新前')
})
onUpdated(() => {
  console.log('父组件的onUpdate --- 父组件数据更新')
})
</script>
